<template>
    <div class="wrapper">
        <div class="block">
            <el-carousel  arrow="never" indicator-position="none" :interval="4000">
                <el-carousel-item v-for="item in swiperList" :key="item.id">
                    <img class="swiper-img" :src="item.imgUrl">
                </el-carousel-item>
            </el-carousel>
        </div>  
        <!-- <swiper :options="swiperOption">
            <swiper-slide v-for="item of swiperList" :key="item.id">
                <img class="swiper-img" :src='item.imgUrl'>
            </swiper-slide>

            <div class="swiper-pagination"  slot="pagination"></div>
        </swiper> -->
    </div>
</template>

<script>
export default {
    name: 'HomeSwiper',
    data () {
        return {
            // swiperOption: {
            //     pagination: '.swiper-pagination',
            //     loop: true,
            //     autoplay: 1000,
            // },
            swiperList: [{
                id: '0001',
                imgUrl:'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20194/cd159d07551d6506de88e0e2b04047ce.jpg_750x200_8a1f27c0.jpg'
            },{
                id: '0002',
                imgUrl:'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/26c9b54e3e02d3724f614883d77a62c6.jpg_750x200_57aa8efa.jpg'
            },{
                id: '0003',
                imgUrl:'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/6b6fd3d9e40b749ac1d189ce80ebb3cc.jpg_750x200_9616e2e7.jpg'
            },{
                id: '0006',
                imgUrl:'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/b3ab45722a9abeb7bd2d69ff80f0699a.jpg_750x200_9b613ff9.jpg'
            },{
                id: '0007',
                imgUrl:'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/ed5f4115226306e48e6fad106a038afe.jpg_750x200_64df48d6.jpg'
            }]
        }
    }
}
</script>

<style lang="stylus" scoped>
    .wrapper
        overflow: hidden
        width: 100%
        height: 0
        padding-bottom: 27%
        background-color #eee
        .swiper-img
            width: 100%

</style>


